<template>
  <div class="header-left-btn">
    <SvgIcon name="fa fa-home" class="btn-home"></SvgIcon>
    <div>
      <el-tooltip v-for="btn in btnList" :key="btn.key" effect="dark" :content="btn.title" placement="bottom">
        <el-button size="small" class="btn-icon" :type="styleHandle(btn)" :focusable="false" @click="clickHandle(btn)">
          <SvgIcon :name="btn.icon" :size="14"></SvgIcon>
        </el-button>
      </el-tooltip>
      <el-divider direction="vertical" />
      <el-tooltip v-for="btn in historyList" :key="btn.key" effect="dark" :content="btn.title" placement="bottom">
        <el-button size="small" class="btn-icon" :type="styleHandle(btn)" :disabled="!btn.select" :focusable="false"
          @click="clickHistoryHandle(btn)">
          <SvgIcon :name="btn.icon" :size="14"></SvgIcon>
        </el-button>
      </el-tooltip>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { toRefs, Ref, reactive, computed } from 'vue';
import { useRouter } from "vue-router"
import { useChartLayoutStore } from '@/stores/modules/chartLayoutStore/chartLayoutStore';
import { ChartLayoutStoreEnum } from '@/stores/modules/chartLayoutStore/chartLayoutStore.d';

import { useChartHistoryStore } from '@/stores/modules/chartHistoryStore/chartHistoryStore'
import { HistoryStackEnum } from '@/stores/modules/chartHistoryStore/chartHistoryStore.d'
import { useRemoveKeyboard } from '@/hooks/useKeyboard.hook'

import { useChartEditStore } from '@/stores/modules/chartEditStore/chartEditStore'
import { ElMessageBox } from 'element-plus';

const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())

const chartHistoryStore = useChartHistoryStore()
const chartEditStore = useChartEditStore()
const { setItem } = useChartLayoutStore();
const router = useRouter();
const btnList = reactive([
  {
    key: ChartLayoutStoreEnum.CHARTS,
    select: getCharts,
    title: '图表组件',
    icon: "fa fa-cube"
  },
  {
    key: ChartLayoutStoreEnum.LAYERS,
    select: getLayers,
    title: '图层控制',
    icon: "fa fa-layer-group"
  },
  {
    key: ChartLayoutStoreEnum.DETAILS,
    select: getDetails,
    title: '详情设置',
    icon: "fa fa-cogs"
  }
])

const isBackStack = computed(() => chartHistoryStore.getBackStack.length > 1)
const isForwardStack = computed(() => chartHistoryStore.getForwardStack.length > 0)

const historyList = reactive([
  {
    key: HistoryStackEnum.BACK_STACK,
    // 一定会有初始化画布
    select: isBackStack,
    title: '后退',
    icon: "fa fa-reply"
  },
  {
    key: HistoryStackEnum.FORWARD_STACK,
    select: isForwardStack,
    title: '前进',
    icon: "fa fa-share"
  }
])


// store 描述的是展示的值，所以和 ContentConfigurations 的 collapsed 是相反的
const styleHandle = (item: any) => {
  if (item.key === ChartLayoutStoreEnum.DETAILS) {
    return item.select ? '' : 'primary'
  }
  return item.select ? 'primary' : ''
}

// // 布局处理
const clickHandle = (item: any) => {
  setItem(item.key, !item.select)
}

// 历史记录处理
const clickHistoryHandle = (item: any) => {
  switch (item.key) {
    case HistoryStackEnum.BACK_STACK:
      chartEditStore.setBack()
      break;
    case HistoryStackEnum.FORWARD_STACK:
      chartEditStore.setForward()
      break;
  }
}

// // 返回首页
const goHomeHandle = () => {
  ElMessageBox({
    message: '返回将不会保存任何操作',
    title: "警告",
    showCancelButton: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    router.push('/');
    useRemoveKeyboard()
  });
}
</script>
<style lang="scss" scoped>
.header-left-btn {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  gap: 25px;
  height: 60px;
  align-items: center;

  .btn-home {
    cursor: pointer;
    padding: 6px 10px;
    background-color: var(--el-bg-color-overlay);
  }

  .btn-icon {
    padding: 12px 7px;

    i {
      margin-right: 0;
    }
  }
}
</style>